<template>
  <div class="ansible-audit-container">

    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-cogs"></i>
              Ansible配置管理
            </h1>
            <p class="page-subtitle">管理和配置Ansible自动化平台连接</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_configs || 0 }}</div>
              <div class="stat-label">配置总数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.active_configs || 0 }}</div>
              <div class="stat-label">活跃配置</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.healthy_rate || 0 }}%</div>
              <div class="stat-label">健康率</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="search-filters glass-effect">
        <el-form inline class="search-form">
          <el-form-item>
            <el-button type="primary" @click="testConnection" class="glass-button test-button" :loading="testing">
              <i class="fa fa-flask"></i>
              测试连接
            </el-button>
            <el-button @click="refreshConfigs" class="glass-button refresh-button" :loading="loading">
              <i class="fa fa-refresh"></i>
              刷新配置
            </el-button>
            <el-button @click="addConfig" class="glass-button add-button">
              <i class="fa fa-plus"></i>
              添加配置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 配置列表 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-list"></i>
          配置列表
        </div>

        <el-table
          :data="configs"
          style="width: 100%"
          v-loading="loading"
          @row-click="viewConfigDetail"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="id" label="ID" width="80" />

          <el-table-column prop="name" label="配置名称" min-width="150">
            <template #default="scope">
              <div class="config-name">
                <i class="fa fa-server"></i>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="host" label="主机地址" width="150" />
          <el-table-column prop="port" label="端口" width="80" />

          <el-table-column prop="is_healthy" label="健康状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.is_healthy ? 'success' : 'danger'" size="small">
                {{ scope.row.is_healthy ? '健康' : '异常' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="is_active" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.is_active ? 'primary' : 'info'" size="small">
                {{ scope.row.is_active ? '活跃' : '停用' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="created_at" label="创建时间" width="160">
            <template #default="scope">
              {{ formatTime(scope.row.created_at) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="350" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" @click.stop="viewConfigDetail(scope.row)" class="action-glass-button">
                  <i class="fa fa-eye"></i>
                  详情
                </el-button>
                <el-button size="small" @click.stop="editConfig(scope.row)" class="action-glass-button">
                  <i class="fa fa-edit"></i>
                  编辑
                </el-button>
                <el-button size="small" @click.stop="testConfigConnection(scope.row)" class="action-glass-button">
                  <i class="fa fa-flask"></i>
                  测试
                </el-button>
                <el-button
                  size="small"
                  @click.stop="deleteConfig(scope.row)"
                  class="action-glass-button danger"
                >
                  <i class="fa fa-trash"></i>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>


    </div>

    <!-- 配置详情对话框 -->
    <el-dialog
      v-model="showConfigDetail"
      title="配置详情"
      width="700px"
      :before-close="handleDetailDialogClose"
      class="detail-dialog"
    >
      <div v-if="selectedConfig" class="config-detail">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fa fa-info-circle"></i>
            基本信息
          </h3>
          <div class="detail-grid">
            <div class="detail-item">
              <label>配置名称：</label>
              <span>{{ selectedConfig.name }}</span>
            </div>
            <div class="detail-item">
              <label>描述：</label>
              <span>{{ selectedConfig.description || '无' }}</span>
            </div>
            <div class="detail-item">
              <label>主机地址：</label>
              <span>{{ selectedConfig.host }}</span>
            </div>
            <div class="detail-item">
              <label>SSH端口：</label>
              <span>{{ selectedConfig.port }}</span>
            </div>
            <div class="detail-item">
              <label>用户名：</label>
              <span>{{ selectedConfig.username }}</span>
            </div>
            <div class="detail-item">
              <label>认证方式：</label>
              <span>{{ selectedConfig.auth_type === 'password' ? '密码认证' : '密钥认证' }}</span>
            </div>
          </div>
        </div>

        <!-- 路径配置 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fa fa-folder"></i>
            路径配置
          </h3>
          <div class="detail-grid">
            <div class="detail-item">
              <label>Ansible配置路径：</label>
              <span>{{ selectedConfig.ansible_config_path }}</span>
            </div>
            <div class="detail-item">
              <label>Inventory路径：</label>
              <span>{{ selectedConfig.inventory_path }}</span>
            </div>
          </div>
        </div>

        <!-- 状态信息 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fa fa-heartbeat"></i>
            状态信息
          </h3>
          <div class="detail-grid">
            <div class="detail-item">
              <label>启用状态：</label>
              <el-tag :type="selectedConfig.is_active ? 'success' : 'info'">
                {{ selectedConfig.is_active ? '已启用' : '已禁用' }}
              </el-tag>
            </div>
            <div class="detail-item">
              <label>默认配置：</label>
              <el-tag :type="selectedConfig.is_default ? 'primary' : 'info'">
                {{ selectedConfig.is_default ? '是' : '否' }}
              </el-tag>
            </div>
            <div class="detail-item">
              <label>健康状态：</label>
              <el-tag
                :type="selectedConfig.health_status === 'healthy' ? 'success' :
                       selectedConfig.health_status === 'warning' ? 'warning' : 'danger'"
              >
                {{ getHealthStatusText(selectedConfig.health_status) }}
              </el-tag>
            </div>
            <div class="detail-item">
              <label>健康信息：</label>
              <span>{{ selectedConfig.health_message || '无' }}</span>
            </div>
            <div class="detail-item">
              <label>最后检查时间：</label>
              <span>{{ formatDateTime(selectedConfig.last_check_time) }}</span>
            </div>
          </div>
        </div>

        <!-- 创建信息 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fa fa-clock-o"></i>
            创建信息
          </h3>
          <div class="detail-grid">
            <div class="detail-item">
              <label>创建者：</label>
              <span>{{ selectedConfig.created_by?.username || '未知' }}</span>
            </div>
            <div class="detail-item">
              <label>创建时间：</label>
              <span>{{ formatDateTime(selectedConfig.created_at) }}</span>
            </div>
            <div class="detail-item">
              <label>更新时间：</label>
              <span>{{ formatDateTime(selectedConfig.updated_at) }}</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDetailDialogClose" class="glass-button">关闭</el-button>
          <el-button
            type="primary"
            @click="editConfigFromDetail"
            class="glass-button primary"
          >
            编辑配置
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加/编辑配置对话框 -->
    <el-dialog
      v-model="showConfigDialog"
      :title="isEditMode ? '编辑配置' : '添加配置'"
      width="600px"
      :before-close="handleDialogClose"
      class="config-dialog"
    >
      <el-form
        ref="configFormRef"
        :model="configForm"
        :rules="configRules"
        label-width="120px"
        class="config-form"
      >
        <el-form-item label="配置名称" prop="name">
          <el-input v-model="configForm.name" placeholder="请输入配置名称" />
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="configForm.description"
            type="textarea"
            :rows="2"
            placeholder="请输入配置描述"
          />
        </el-form-item>

        <el-form-item label="主机地址" prop="host">
          <el-input v-model="configForm.host" placeholder="例如: localhost 或 192.168.1.100" />
        </el-form-item>

        <el-form-item label="SSH端口" prop="port">
          <el-input-number v-model="configForm.port" :min="1" :max="65535" style="width: 100%" />
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="configForm.username" placeholder="SSH登录用户名" />
        </el-form-item>

        <el-form-item label="认证方式" prop="auth_type">
          <el-radio-group v-model="configForm.auth_type">
            <el-radio label="password">密码认证</el-radio>
            <el-radio label="key">密钥认证</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="configForm.auth_type === 'password'" label="密码" prop="password">
          <el-input
            v-model="configForm.password"
            type="password"
            placeholder="SSH登录密码"
            show-password
          />
        </el-form-item>

        <el-form-item v-if="configForm.auth_type === 'key'" label="私钥" prop="private_key">
          <el-input
            v-model="configForm.private_key"
            type="textarea"
            :rows="4"
            placeholder="请粘贴SSH私钥内容"
          />
        </el-form-item>

        <el-form-item label="Ansible配置路径" prop="ansible_config_path">
          <el-input v-model="configForm.ansible_config_path" placeholder="/etc/ansible/ansible.cfg" />
        </el-form-item>

        <el-form-item label="Inventory路径" prop="inventory_path">
          <el-input v-model="configForm.inventory_path" placeholder="/etc/ansible/hosts" />
        </el-form-item>

        <el-form-item label="状态设置">
          <el-checkbox v-model="configForm.is_active">启用此配置</el-checkbox>
          <el-checkbox v-model="configForm.is_default" style="margin-left: 20px">设为默认配置</el-checkbox>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogClose" class="glass-button">取消</el-button>
          <el-button
            type="primary"
            @click="submitConfig"
            :loading="submitting"
            class="glass-button primary"
          >
            {{ submitting ? '保存中...' : '保存' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const testing = ref(false)
const submitting = ref(false)
const showConfigDetail = ref(false)
const showConfigDialog = ref(false)
const isEditMode = ref(false)
const selectedConfig = ref(null)
const configs = ref([])
const configFormRef = ref(null)

// 统计数据
const statistics = ref({
  total_configs: 0,
  active_configs: 0,
  healthy_rate: 0
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 配置表单数据
const configForm = reactive({
  name: '',
  description: '',
  host: 'localhost',
  port: 22,
  username: '',
  auth_type: 'password',
  password: '',
  private_key: '',
  ansible_config_path: '/etc/ansible/ansible.cfg',
  inventory_path: '/etc/ansible/hosts',
  is_active: true,
  is_default: false
})

// 表单验证规则
const configRules = {
  name: [
    { required: true, message: '请输入配置名称', trigger: 'blur' },
    { min: 2, max: 100, message: '配置名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  host: [
    { required: true, message: '请输入主机地址', trigger: 'blur' }
  ],
  port: [
    { required: true, message: '请输入SSH端口', trigger: 'blur' },
    { type: 'number', min: 1, max: 65535, message: '端口范围为 1-65535', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    {
      validator: (rule, value, callback) => {
        if (configForm.auth_type === 'password' && !value) {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  private_key: [
    {
      validator: (rule, value, callback) => {
        if (configForm.auth_type === 'key' && !value) {
          callback(new Error('请输入私钥'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 方法
const loadConfigs = async () => {
  loading.value = true
  try {
    const { ansibleAPI } = await import('@/api/ansible')
    const response = await ansibleAPI.getConfigs()
    const data = response.data
    configs.value = data.results || data

    // 转换数据格式以适配前端显示
    configs.value = configs.value.map(config => ({
      ...config,
      is_healthy: config.health_status === 'healthy'
    }))

    // 更新统计
    statistics.value.total_configs = configs.value.length
    statistics.value.active_configs = configs.value.filter(config => config.is_active).length
    statistics.value.healthy_rate = Math.round(
      (configs.value.filter(config => config.is_healthy).length / configs.value.length) * 100
    )

    pagination.total = configs.value.length
  } catch (error) {
    console.error('加载配置失败:', error)
    ElMessage.error('加载配置列表失败')

    // 使用模拟数据作为后备
    configs.value = []
    statistics.value = { total_configs: 0, active_configs: 0, healthy_rate: 0 }
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

const testConnection = async () => {
  testing.value = true
  try {
    const { ansibleAPI } = await import('@/api/ansible')
    const response = await ansibleAPI.healthCheck()
    const result = response.data

    if (result.status === 'success') {
      ElMessage.success('批量健康检查完成')
      // 刷新配置列表以更新健康状态
      loadConfigs()
    } else {
      ElMessage.error(`健康检查失败: ${result.message || '未知错误'}`)
    }
  } catch (error) {
    console.error('健康检查失败:', error)
    ElMessage.error('健康检查异常')
  } finally {
    testing.value = false
  }
}

const refreshConfigs = () => {
  loadConfigs()
}

const addConfig = () => {
  isEditMode.value = false
  resetConfigForm()
  showConfigDialog.value = true
}

const viewConfigDetail = async (config) => {
  try {
    loading.value = true
    const { ansibleAPI } = await import('@/api/ansible')

    // 调用详细信息API获取完整数据
    const response = await ansibleAPI.getConfig(config.id)
    const detailData = response.data

    console.log('获取到的详细数据:', detailData)
    selectedConfig.value = detailData
    showConfigDetail.value = true
  } catch (error) {
    console.error('获取配置详情失败:', error)
    ElMessage.error('获取配置详情异常')
  } finally {
    loading.value = false
  }
}

const editConfig = (config) => {
  isEditMode.value = true
  selectedConfig.value = config

  // 填充表单数据
  Object.assign(configForm, {
    name: config.name,
    description: config.description || '',
    host: config.host,
    port: config.port,
    username: config.username,
    auth_type: config.auth_type,
    password: '', // 出于安全考虑，不显示密码
    private_key: '', // 出于安全考虑，不显示私钥
    ansible_config_path: config.ansible_config_path,
    inventory_path: config.inventory_path,
    is_active: config.is_active,
    is_default: config.is_default
  })

  showConfigDialog.value = true
}

const testConfigConnection = async (config) => {
  testing.value = true
  try {
    const { ansibleAPI } = await import('@/api/ansible')
    const response = await ansibleAPI.testConnection(config.id)
    const result = response.data

    if (result.status === 'success') {
      ElMessage.success(`${config.name} 连接测试成功`)
      // 刷新配置列表以更新健康状态
      loadConfigs()
    } else {
      ElMessage.error(`${config.name} 连接测试失败: ${result.message || '未知错误'}`)
    }
  } catch (error) {
    console.error('测试连接失败:', error)
    ElMessage.error(`${config.name} 连接测试异常`)
  } finally {
    testing.value = false
  }
}

const deleteConfig = async (config) => {
  try {
    // 使用Element Plus的确认对话框
    await ElMessageBox.confirm(
      `确定要删除配置 "${config.name}" 吗？此操作不可恢复。`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'glass-message-box'
      }
    )

    loading.value = true
    const { ansibleAPI } = await import('@/api/ansible')

    const response = await ansibleAPI.deleteConfig(config.id)

    ElMessage.success(`配置 "${config.name}" 删除成功`)
    // 刷新配置列表
    loadConfigs()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除配置失败:', error)
      ElMessage.error('删除配置异常')
    }
  } finally {
    loading.value = false
  }
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  loadConfigs()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  loadConfigs()
}

const formatTime = (time) => {
  if (!time) return '未知'
  return new Date(time).toLocaleString()
}

const resetConfigForm = () => {
  Object.assign(configForm, {
    name: '',
    description: '',
    host: 'localhost',
    port: 22,
    username: '',
    auth_type: 'password',
    password: '',
    private_key: '',
    ansible_config_path: '/etc/ansible/ansible.cfg',
    inventory_path: '/etc/ansible/hosts',
    is_active: true,
    is_default: false
  })

  // 清除表单验证
  if (configFormRef.value) {
    configFormRef.value.clearValidate()
  }
}

const handleDialogClose = () => {
  showConfigDialog.value = false
  resetConfigForm()
  selectedConfig.value = null
}

const handleDetailDialogClose = () => {
  showConfigDetail.value = false
  selectedConfig.value = null
}

const editConfigFromDetail = () => {
  // 从详情页面跳转到编辑页面
  handleDetailDialogClose()
  editConfig(selectedConfig.value)
}

const submitConfig = async () => {
  if (!configFormRef.value) return

  try {
    // 验证表单
    await configFormRef.value.validate()

    submitting.value = true
    const { ansibleAPI } = await import('@/api/ansible')

    // 准备提交数据
    const submitData = { ...configForm }

    // 如果是编辑模式且密码/私钥为空，则不提交这些字段
    if (isEditMode.value) {
      if (!submitData.password) delete submitData.password
      if (!submitData.private_key) delete submitData.private_key
    }

    let response
    if (isEditMode.value) {
      response = await ansibleAPI.updateConfig(selectedConfig.value.id, submitData)
    } else {
      response = await ansibleAPI.createConfig(submitData)
    }

    ElMessage.success(isEditMode.value ? '配置更新成功' : '配置创建成功')
    handleDialogClose()
    loadConfigs() // 刷新列表
  } catch (error) {
    console.error('提交配置失败:', error)
    ElMessage.error('提交配置异常')
  } finally {
    submitting.value = false
  }
}

const getHealthStatusText = (status) => {
  const statusMap = {
    'healthy': '健康',
    'unhealthy': '不健康',
    'warning': '警告',
    'unknown': '未知',
    'error': '错误'
  }
  return statusMap[status] || status
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '无'
  try {
    return new Date(dateTime).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (error) {
    return dateTime
  }
}



onMounted(() => {
  loadConfigs()
})
</script>

<style lang="scss" scoped>
/* 主容器 */
.ansible-audit-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

/* 星空背景 */
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

/* 主要内容区域 */
.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 玻璃效果基础样式 */
.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section {
  flex: 1;
}

.page-title {
  color: #00eaff;
  font-size: 2.5em;
  margin: 0 0 10px 0;
  text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 15px;

  i {
    font-size: 0.8em;
  }
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1em;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;

  .stat-number {
    color: #00eaff;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  }

  .stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    margin-top: 5px;
  }
}

/* 搜索和筛选 */
.search-filters {
  margin-bottom: 30px;
  padding: 20px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 表格区域 */
.audit-table-section {
  margin-bottom: 30px;
  padding: 30px;
}

.section-title {
  color: #00eaff;
  font-size: 1.3em;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);

  i {
    color: #00eaff;
  }
}

/* 表格样式 */
:deep(.el-table) {
  background: transparent !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 8px !important;

  .el-table__header-wrapper {
    background: rgba(164, 244, 186, 0.1) !important;

    th {
      background: transparent !important;
      border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: 600 !important;
    }
  }

  .el-table__body-wrapper {
    background: transparent !important;

    tr {
      background: rgba(164, 244, 186, 0.05) !important;

      &:hover {
        background: rgba(164, 244, 186, 0.1) !important;
      }

      td {
        border-bottom: 1px solid rgba(164, 244, 186, 0.1) !important;
        color: rgba(255, 255, 255, 0.9) !important;
      }
    }
  }
}

/* 分页 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 分页组件样式修复 */
:deep(.el-pagination) {
  .el-pager li {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;

    &:hover {
      background: rgba(164, 244, 186, 0.2) !important;
      color: #ffffff !important;
    }

    &.is-active {
      background: rgba(0, 234, 255, 0.3) !important;
      border-color: rgba(0, 234, 255, 0.5) !important;
      color: #ffffff !important;
    }
  }

  .btn-prev, .btn-next {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;

    &:hover {
      background: rgba(164, 244, 186, 0.2) !important;
      color: #ffffff !important;
    }

    &:disabled {
      background: rgba(164, 244, 186, 0.05) !important;
      border-color: rgba(164, 244, 186, 0.1) !important;
      color: rgba(255, 255, 255, 0.3) !important;
    }
  }

  .el-select .el-input__wrapper {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-pagination__total,
  .el-pagination__jump {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}

/* 修复深蓝色背景问题 */
:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select .el-input__wrapper),
:deep(.el-input-number .el-input__wrapper) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;

  &:hover {
    border-color: rgba(164, 244, 186, 0.5) !important;
  }

  &.is-focus {
    border-color: #00eaff !important;
    box-shadow: 0 0 5px rgba(0, 234, 255, 0.3) !important;
  }
}

/* 修复输入框内部文字颜色 */
:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.9) !important;

  &::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }
}

/* 修复下拉选择器 */
:deep(.el-select-dropdown) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  backdrop-filter: blur(20px) !important;

  .el-select-dropdown__item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;

    &:hover {
      background: rgba(164, 244, 186, 0.2) !important;
    }

    &.is-selected {
      background: rgba(0, 234, 255, 0.3) !important;
      color: #ffffff !important;
    }
  }
}

/* 标签样式 */
:deep(.el-tag) {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 4px !important;

  &.el-tag--success {
    background: rgba(0, 234, 255, 0.2) !important;
    border-color: rgba(0, 234, 255, 0.4) !important;
    color: #ffffff !important;
  }

  &.el-tag--danger {
    background: rgba(255, 107, 107, 0.2) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
    color: #ffffff !important;
  }

  &.el-tag--primary {
    background: rgba(0, 234, 255, 0.2) !important;
    border-color: rgba(0, 234, 255, 0.4) !important;
    color: #ffffff !important;
  }

  &.el-tag--info {
    background: rgba(164, 244, 186, 0.15) !important;
    border-color: rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
}



.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
  box-shadow:
    0 2px 8px rgba(164, 244, 186, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 4px 12px rgba(164, 244, 186, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }

  &.primary {
    background: rgba(0, 234, 255, 0.2) !important;
    border-color: rgba(0, 234, 255, 0.4) !important;
    color: #ffffff !important;
    box-shadow:
      0 2px 8px rgba(0, 234, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    &:hover {
      background: rgba(0, 234, 255, 0.3) !important;
      border-color: rgba(0, 234, 255, 0.6) !important;
      box-shadow:
        0 4px 12px rgba(0, 234, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  /* 测试连接按钮 - 橙色 */
  &.test-button {
    background: rgba(255, 165, 0, 0.2) !important;
    border-color: rgba(255, 165, 0, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(255, 165, 0, 0.3) !important;
      border-color: rgba(255, 165, 0, 0.6) !important;
    }

    i {
      color: #ffa500 !important;
    }
  }

  /* 刷新配置按钮 - 紫色 */
  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  /* 添加配置按钮 - 绿色 */
  &.add-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
    }

    i {
      color: #22c55e !important;
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .stats-section {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-section {
    flex-direction: column;
    gap: 15px;
  }
}

/* 对话框样式 */
:deep(.el-dialog) {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-dialog__header) {
  background: rgba(164, 244, 186, 0.05) !important;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 20px !important;
}

:deep(.el-dialog__title) {
  color: #00eaff !important;
  font-weight: bold !important;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.3) !important;
  font-size: 1.2em !important;
}

:deep(.el-dialog__headerbtn) {
  .el-dialog__close {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;

    &:hover {
      color: #00eaff !important;
    }
  }
}

:deep(.el-dialog__body) {
  background: rgba(164, 244, 186, 0.05) !important;
  padding: 30px !important;
}

:deep(.el-dialog__footer) {
  background: rgba(164, 244, 186, 0.05) !important;
  border-top: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 20px !important;
}

/* 表单样式 */
:deep(.config-form) {
  .el-form-item__label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
  }

  .el-input__wrapper {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 6px !important;
    box-shadow: none !important;

    &:hover {
      border-color: rgba(164, 244, 186, 0.5) !important;
    }

    &.is-focus {
      border-color: #00eaff !important;
      box-shadow: 0 0 5px rgba(0, 234, 255, 0.3) !important;
    }
  }

  .el-input__inner {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.9) !important;

    &::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }

  .el-textarea__inner {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 6px !important;

    &:focus {
      border-color: #00eaff !important;
      box-shadow: 0 0 5px rgba(0, 234, 255, 0.3) !important;
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }

  .el-radio__label {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-radio__input.is-checked .el-radio__inner {
    background-color: #00eaff !important;
    border-color: #00eaff !important;
  }

  .el-checkbox__label {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #00eaff !important;
    border-color: #00eaff !important;
  }

  .el-input-number {
    .el-input__wrapper {
      background: rgba(164, 244, 186, 0.1) !important;
      border: 1px solid rgba(164, 244, 186, 0.3) !important;
    }

    .el-input__inner {
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }
}

/* 操作按钮容器 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

/* 操作按钮样式 */
.action-glass-button {
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-width: 60px !important;

  &:active {
    transform: translateY(0) !important;
  }

  /* 详情按钮 - 蓝色 */
  &:nth-child(1) {
    background: rgba(0, 234, 255, 0.15) !important;
    border: 1px solid rgba(0, 234, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      0 2px 8px rgba(0, 234, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    &:hover {
      background: rgba(0, 234, 255, 0.25) !important;
      border-color: rgba(0, 234, 255, 0.5) !important;
      color: #ffffff !important;
      transform: translateY(-1px) !important;
      box-shadow:
        0 4px 12px rgba(0, 234, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    i {
      margin-right: 4px !important;
      color: #00eaff !important;
    }
  }

  /* 编辑按钮 - 绿色 */
  &:nth-child(2) {
    background: rgba(164, 244, 186, 0.15) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      0 2px 8px rgba(164, 244, 186, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    &:hover {
      background: rgba(164, 244, 186, 0.25) !important;
      border-color: rgba(164, 244, 186, 0.5) !important;
      color: #ffffff !important;
      transform: translateY(-1px) !important;
      box-shadow:
        0 4px 12px rgba(164, 244, 186, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    i {
      margin-right: 4px !important;
      color: #a4f4ba !important;
    }
  }

  /* 测试按钮 - 橙色 */
  &:nth-child(3) {
    background: rgba(255, 165, 0, 0.15) !important;
    border: 1px solid rgba(255, 165, 0, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      0 2px 8px rgba(255, 165, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    &:hover {
      background: rgba(255, 165, 0, 0.25) !important;
      border-color: rgba(255, 165, 0, 0.5) !important;
      color: #ffffff !important;
      transform: translateY(-1px) !important;
      box-shadow:
        0 4px 12px rgba(255, 165, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    i {
      margin-right: 4px !important;
      color: #ffa500 !important;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 对话框按钮样式 */
:deep(.dialog-footer) {
  .glass-button {
    background: rgba(164, 244, 186, 0.15) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 6px !important;
    box-shadow:
      0 2px 8px rgba(164, 244, 186, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    &:hover {
      background: rgba(164, 244, 186, 0.25) !important;
      border-color: rgba(164, 244, 186, 0.5) !important;
      transform: translateY(-1px) !important;
      box-shadow:
        0 4px 12px rgba(164, 244, 186, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    &.primary {
      background: rgba(0, 234, 255, 0.2) !important;
      border-color: rgba(0, 234, 255, 0.4) !important;
      color: #ffffff !important;
      box-shadow:
        0 2px 8px rgba(0, 234, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

      &:hover {
        background: rgba(0, 234, 255, 0.3) !important;
        border-color: rgba(0, 234, 255, 0.6) !important;
        box-shadow:
          0 4px 12px rgba(0, 234, 255, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
      }
    }
  }
}

/* 详情对话框样式 */
:deep(.detail-dialog) {
  .el-dialog {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  .el-dialog__header {
    background: rgba(164, 244, 186, 0.05) !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 20px !important;
  }

  .el-dialog__title {
    color: #00eaff !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3) !important;
    font-size: 1.2em !important;
  }

  .el-dialog__body {
    background: rgba(164, 244, 186, 0.05) !important;
    padding: 30px !important;
  }

  .el-dialog__footer {
    background: rgba(164, 244, 186, 0.05) !important;
    border-top: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 20px !important;
  }
}

.config-detail {
  .detail-section {
    margin-bottom: 25px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-title {
    color: #00eaff;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(164, 244, 186, 0.2);
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.3);

    i {
      margin-right: 8px;
      color: #a4f4ba;
    }
  }

  .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }

  .detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    label {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9em;
      font-weight: 500;
    }

    span {
      color: rgba(255, 255, 255, 0.9);
      font-size: 1em;
      padding: 8px 12px;
      background: rgba(164, 244, 186, 0.1);
      border: 1px solid rgba(164, 244, 186, 0.2);
      border-radius: 6px;
      backdrop-filter: blur(10px);
      word-break: break-all;
    }
  }
}

/* 详情页面标签样式 */
.config-detail {
  :deep(.el-tag) {
    background: rgba(164, 244, 186, 0.15) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 4px !important;

    &.el-tag--success {
      background: rgba(0, 234, 255, 0.2) !important;
      border-color: rgba(0, 234, 255, 0.4) !important;
      color: #ffffff !important;
    }

    &.el-tag--danger {
      background: rgba(255, 107, 107, 0.2) !important;
      border-color: rgba(255, 107, 107, 0.4) !important;
      color: #ffffff !important;
    }

    &.el-tag--warning {
      background: rgba(255, 165, 0, 0.2) !important;
      border-color: rgba(255, 165, 0, 0.4) !important;
      color: #ffffff !important;
    }

    &.el-tag--primary {
      background: rgba(0, 234, 255, 0.2) !important;
      border-color: rgba(0, 234, 255, 0.4) !important;
      color: #ffffff !important;
    }

    &.el-tag--info {
      background: rgba(164, 244, 186, 0.15) !important;
      border-color: rgba(164, 244, 186, 0.3) !important;
      color: rgba(255, 255, 255, 0.7) !important;
    }
  }
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.action-glass-button {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(164, 244, 186, 0.2) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(164, 244, 186, 0.3) !important;
  }

  i {
    margin-right: 4px !important;
  }

  &.danger {
    background: rgba(255, 107, 107, 0.1) !important;
    border-color: rgba(255, 107, 107, 0.3) !important;
    color: rgba(255, 107, 107, 0.9) !important;

    &:hover {
      background: rgba(255, 107, 107, 0.2) !important;
      border-color: rgba(255, 107, 107, 0.5) !important;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
    }

    &:disabled {
      background: rgba(164, 164, 164, 0.1) !important;
      border-color: rgba(164, 164, 164, 0.2) !important;
      color: rgba(164, 164, 164, 0.5) !important;
      cursor: not-allowed !important;

      &:hover {
        transform: none !important;
        box-shadow: none !important;
      }
    }
  }
}

/* 确认对话框样式 */
:deep(.glass-message-box) {
  .el-message-box {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  .el-message-box__header {
    background: rgba(164, 244, 186, 0.05) !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .el-message-box__title {
    color: #00eaff !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3) !important;
  }

  .el-message-box__content {
    background: rgba(164, 244, 186, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-message-box__btns {
    background: rgba(164, 244, 186, 0.05) !important;
    border-top: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 0 0 12px 12px !important;

    .el-button {
      background: rgba(164, 244, 186, 0.1) !important;
      border: 1px solid rgba(164, 244, 186, 0.3) !important;
      color: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(10px) !important;

      &:hover {
        background: rgba(164, 244, 186, 0.2) !important;
        border-color: rgba(164, 244, 186, 0.5) !important;
        color: #ffffff !important;
      }

      &.el-button--primary {
        background: rgba(255, 107, 107, 0.2) !important;
        border-color: rgba(255, 107, 107, 0.4) !important;
        color: #ffffff !important;

        &:hover {
          background: rgba(255, 107, 107, 0.3) !important;
          border-color: rgba(255, 107, 107, 0.6) !important;
        }
      }
    }
  }
}
</style>
